<template>
  <div>
    <el-form :inline="true" :model="ruleSet" class="demo-form-inline">
      <el-form-item label="规则名称">
        <el-input v-model="ruleSet.ruleName" placeholder="规则名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryRuleSet">查询</el-button>
      </el-form-item>
    </el-form>
    <yu-table ref="yuTable" :tableData="tableData" :columns="tableData.columns">
      <template #toolbar>
        <el-button-group>
          <el-button @click="addRule"> <yu-icon iconName="tianjia" /> 新增</el-button>
          <el-button @click="delBatch"><yu-icon iconName="shanchu" />删除</el-button>
        </el-button-group>
      </template>

      <template v-slot:ruleStuts="{ scopeData }">
        <el-switch
          v-model="scopeData.row.isStop"
          class="tablescope"
          @change="changeIsStop($event, scopeData.row)"
          active-value="0"
          inactive-value="1"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </template>

      <template v-slot:handleSlot="{ scopeData }">
        <el-button-group class="ml-4">
          <el-button text size="small" type="success" @click="editBtn(scopeData.row)">编辑</el-button>
          <el-button text size="small" type="danger" @click="delRuleSet(scopeData.row, scopeData.row.rowIndex - 1)">删除 </el-button>
        </el-button-group>
      </template>
    </yu-table>
    <yu-dialog :data="dialogConfig" v-model:isShow="isShow">
      <sys-rule-edit :editData="editData" v-model:isShow="isShow" />
    </yu-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
  import YuTable from '@/components/com/YuTable.vue';
  import SysRuleEdit from './SysRuleEdit.vue';
  const { proxy } = getCurrentInstance();
  const ruleSet = ref({ ruleName: '' });
  const dialogConfig = reactive({ title: '' });
  const editData = ref({});
  const isShow = ref(false);
  const yuTable = ref(null);
  const tableData = ref({
    data: [],
    columns: [],
    tableArrts: {},
  });
  tableData.value.columns = [
    { type: 'selection' },
    { title: '名称', key: 'ruleName', width: 120, align: 'left', tooltip: true },
    { title: '数据来源', key: 'rootSource', align: 'left' },
    { title: '搜索地址', key: 'rootSearch', align: 'left', tooltip: true },
    { title: '规则类型', key: 'ruleType', align: 'left', tooltip: true },
    {
      title: '是否停用',
      key: 'isStop',
      tooltip: true,
      align: 'center',
      slot: 'ruleStuts',
      width: 100,
    },
    { title: '操作', slot: 'handleSlot', width: 150 },
  ];
  onMounted(() => {
    getData();
  });
  const getData = async () => {
    proxy.$api.rule.queryRule(ruleSet.value).then(res => {
      tableData.value.data = res;
    });
  };
  const queryRuleSet = async () => {
    getData();
  };
  const changeIsStop = async (value, row) => {};
  const addRule = async () => {
    isShow.value = true;
    dialogConfig.width = '80%';
    dialogConfig.height = '630px';
    dialogConfig.title = '新增规则';
    editData.value = {};
  };
  const editBtn = async row => {
    isShow.value = true;
    dialogConfig.width = '80%';
    dialogConfig.title = '修改规则';
    dialogConfig.height = '630px';
    editData.value = row;
  };
  const delBatch = () => {
    let selectRows = yuTable.value.selectRows;
    if (selectRows.length > 0) {
      proxy
        .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          proxy.$api.system.delBookRuleSet(selectRows).then(res => {
            if (res.code != -1) {
              proxy.$message({
                type: 'success',
                message: res.msg,
              });
              yuTable.value.deleteRows();
            } else {
              proxy.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        });
    } else {
      proxy.$message({
        type: 'error',
        message: '请选择删除数据',
      });
    }
  };
  const delRuleSet = async (row, index) => {
    proxy
      .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        let data = [];
        data.push(row);
        proxy.$api.system.delBookRuleSet(data).then(res => {
          if (res.code != -1) {
            proxy.$message({
              type: 'success',
              message: res.msg,
            });
            yuTable.value.deleteRow(row);
          } else {
            proxy.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      });
  };
</script>
<style lang="scss" scoped></style>
